<template>
  <div id="contain">
    <Search />
    <el-carousel style="margintop: 5px" height="400px">
      <el-carousel-item v-for="(item, index) in carList" :key="index">
        <img :src="item" style="height: 400px" />
      </el-carousel-item>
    </el-carousel>
    <el-card class="box-card" style="margin-top: 5px">
      <div slot="header" class="clearfix">
        <span>热门景点</span>
      </div>
      <div class="cardContain">
        <div
          v-for="(item, index) in jdList"
          :key="index"
          @click="godetails1(item.areaId)"
        >
          <div style="width: 210px; height: 180px">
            <img :src="item.pic" style="width: 210px; height: 180px" />
          </div>
          <div class="intro">{{ item.introduction }}</div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 5px">
      <div slot="header" class="clearfix">
        <span>热门酒店</span>
      </div>
      <div class="cardContain">
        <div v-for="(item, index) in jiudianList" :key="index"  @click="godetails(item.hotelId)">
          <div style="width: 210px; height: 180px; border: 1px solid red">
            <img :src="item.pic" style="width: 210px; height: 180px" />
          </div>
          <div class="intro">{{ item.name }}</div>
        </div>
      </div> </el-card
    ><el-card class="box-card" style="margin-top: 5px">
      <div slot="header" class="clearfix">
        <span>热门线路</span>
      </div>
      <div class="cardContain">
        <div v-for="(item, index) in xianluList" :key="index" @click="godetails3(item.goodsId)">
          <div style="width: 210px; height: 180px; border: 1px solid red">
            <img :src="item.pic" style="width: 210px; height: 180px" />
          </div>
          <div class="intro">{{ item.name }}</div>
        </div>
      </div> </el-card
    >
  </div>
</template>

<script>
import Search from "@/components/Search.vue";
export default {
  components: {
    Search,
  },
  data() {
    return {
      jdList: [],
      carList: [
        "https://p1-q.mafengwo.net/s18/M00/44/8C/CoUBYGCRNTWAOUjmAB8I5ng2GVU122.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg",
        "https://b1-q.mafengwo.net/s18/M00/C0/D4/CoUBYGCP6imAQBP7AC8mT2Ky7tU807.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg",
        "https://p1-q.mafengwo.net/s18/M00/98/F9/CoUBYGCOxluAANQ5AC3oKiognMw251.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg",
        "https://b1-q.mafengwo.net/s18/M00/27/FF/CoUBYGCNa9KAPVQqABmMN-86c6U369.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg",
      ],
      jiudianList: [],
      xianluList: [],
    };
  },
  mounted() {
    // this.getCarousel();
    this.getJingDian();
    this.getJiudian();
    this.getXianlu();
  },
  methods: {
    //轮播图图片
    getCarousel() {
      this.$axios({
        method: "get",
        url: "/static/home/ad",
      }).then((res) => {
        // console.log("轮播图");
        // console.log(res);
      });
    },
    getJingDian() {
      this.$axios({
        method: "get",
        url: "/static/home/scenic",
      }).then((res) => {
        if (res.data.code === 0) {
          this.jdList = res.data.page;
          // console.log("旅游景点");
          // console.log(res.data.page);
        }
        if (res.data.code === 500) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    getJiudian() {
      this.$axios({
        method: "get",
        url: "/static/home/hotel",
      }).then((res) => {
        // console.log("酒店");
        // console.log(res);
        if (res.data.code === 0) {
          this.jiudianList = res.data.page;
        }
        if (res.data.code === 500) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    getXianlu() {
      this.$axios({
        method: "get",
        url: "/static/home/goods",
      }).then((res) => {
        // console.log("线路");
        // console.log(res);
        if (res.data.code === 0) {
          this.xianluList = res.data.page;
          // console.log(res.data.page);
        }
        if (res.data.code === 500) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    godetails1(id) {
      this.$router.push({ path: "jddetails", query: { areId: id, fromwhere: '0' } });
    },
     godetails(hotelId) {
      this.$router.push({ path: "jiudiandetails", query: { hotelId: hotelId, fromwhere: '0' } });
    },
    godetails3(goodsId){
    this.$router.push({ path: "xldetails", query: { goodsId: goodsId, fromwhere: '0' } });
    }
  },
};
</script>
<style  scoped>
.cardContain {
  display: flex;
  justify-content: space-between;
}
.intro {
  margin-top: 5px;
  width: 220px;
  height: 37px;
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 5px;
}
</style>>
